<template>
	<view class="content">
		<view :class="show ? 'fade-in' : 'fade-out'">
<!--			<view class="sticky1">-->
<!--				&lt;!&ndash; #ifdef MP &ndash;&gt;-->
<!--				<view class="" :style="{'height':navTop+'px'}"></view>-->
<!--				&lt;!&ndash; #endif &ndash;&gt;-->
<!--				&lt;!&ndash; #ifdef APP-PLUS &ndash;&gt;-->
<!--				<view class="status_bar"></view>-->
<!--				&lt;!&ndash; #endif &ndash;&gt;-->
<!--				<view class="navTab">-->
<!--					<text>消息</text>-->
<!--					<view class="xian"></view>-->
<!--				</view>-->
<!--			</view>-->
      <view class="top-title">消息</view>
			<view class="tabs tn-flex tn-flex-row-around tn-flex-col-center" v-if="miniapp_switch == 1">
				<view class="tabs-item" @click="qiehuan(0,'评论我的')">
					<image src="https://peiwanblogs.huolieniaowangluo.com/wx-image/wfw/p1.png" mode=""></image>
					<view class="t1">评论</view>
				</view>
				<view class="tabs-item" @click="qiehuan(1,'收到的赞')">
					<image src="https://peiwanblogs.huolieniaowangluo.com/wx-image/wfw/p2.png" mode=""></image>
					<view class="t1">赞</view>
				</view>
				<view class="tabs-item" @click="qiehuan(2,'系统通知')">
					<image src="https://peiwanblogs.huolieniaowangluo.com/wx-image/wfw/p3.png" mode=""></image>
					<view class="t1">系统通知</view>
				</view>
				<view class="tabs-item" @click="qiehuan(3,'关注我的')">
					<image src="https://peiwanblogs.huolieniaowangluo.com/wx-image/wfw/p4.png" mode=""></image>
					<view class="t1">关注</view>
				</view>
			</view>
			<view class="conversation">
				<!-- hover-class="click-color" -->
				<block v-for="(item,index) in content" :key="index">
					<view class="c-item tn-flex tn-flex-col-center" :class="{'click-color':current == index}"
						@longpress="listPress" :id="index" @click="jinru(item,index)" hover-class="click-color">
						<view class="left-img">
							<image :src="item.head_url" mode=""></image>
							<tn-badge backgroundColor="red" fontColor="#fff" absolute
								v-if="item.unread>0">{{item.unread}}</tn-badge>
						</view>
						<view class="right">
							<view class="name-time tn-flex tn-flex-row-between">
								<text class="name">{{item.username}}</text>
								<text class="time">{{$common.timeToDate(item.time)}}</text>
							</view>
							<view class="neirong tn-text-ellipsis" v-if="item.type=='text'">{{item.content}}</view>
							<view class="neirong tn-text-ellipsis" v-if="item.type=='music'">语音</view>
							<view class="neirong tn-text-ellipsis" v-if="item.type=='image'">图片</view>
							<view class="neirong tn-text-ellipsis" v-if="item.type=='face' && item.is_gift==1">礼物</view>
							<view class="neirong tn-text-ellipsis" v-if="item.type=='face' && item.is_gift==0">emoj</view>
						</view>
					</view>
				</block>

				<view class="kuai" :animation="animationData" v-if="kuaiShow" :style="kuaiStyle">
					<!-- <view class="kuai-text" hover-class="click-color1" @click="operation(1)">拉黑</view> -->
					<view class="kuai-text" hover-class="click-color1" @click="operation(2)">删除</view>
				</view>
			</view>
			<w-load-more ref="wLoadMore"></w-load-more>
			<!-- 蒙层 -->
			<view class="mack" v-if="kuaiShow" @click="mackClick"></view>
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				kuaiStyle: '',
				windowWidth: 0,
				windowHeight: 0,
				kuaiShow: false,
				current: -1,
				animationData: {},
				animation: '',
				content: [],
				page: 1,
				atUserId: '', //当前长按用户id
				unread: 0, //当前长按用户未读消息
				navTop: 0,
				show: false,
				miniapp_switch: 0
			}
		},
		onPageScroll() {
			if (!this.kuaiShow) return
			this.colseKuai()
		},
		onReachBottom() {
			this.page++
			this.$refs['wLoadMore'].setLoading()
			this.upCallback()
		},
		onLoad() {
			// 注册接受消息监听
			uni.$on('listMessage', (message) => {
				if (message.type == 'text' || message.type == 'mp3' || message.type == 'image') {
					console.log('listMessage')
					setTimeout(() => {
						this.upCallback()
					}, 2000)

				}

			});
			this.setPermissions()
			this.upCallback(1)
			// #ifdef MP
			let menuButtonInfo = uni.getMenuButtonBoundingClientRect()
			console.log(menuButtonInfo.top)
			this.navTop = menuButtonInfo.top
			// #endif
			this.GetConfig()
		},
		onReady() {
			var animation = uni.createAnimation({
				duration: 300,
				timingFunction: 'ease',
			})
			this.animation = animation
			this.getWindowSize()
		},
		methods: {
			async GetConfig() {
				let res = await this.$request({
					method: 'post',
					url: '/api/index/GetConfig'
				})
				console.log(res.data.data.miniapp_switch, 'miniapp_switchminiapp_switch')
				// this.miniapp_switch = res.data.data.miniapp_switch
				this.miniapp_switch = 1
			},

			async upCallback(loading) {
				try {
					let that = this;
					let result = await that.$request({
						loading,
						method: 'post',
						url: '/api/chat/get_list',
						data: {
							id: that.id,
							page: this.page
						}
					});
					let data = result.data.data.data
					if (that.page == 1) {
						that.content = data;
						that.show = true
					} else {
						that.content = that.content.concat(data)
						this.$refs['wLoadMore'].setNomore()
						if (data.length == 0) {
							this.page--
						}
					}
					uni.setStorageSync('chatlist', that.content)
				} catch (e) {
					console.log(e)
					uni.showToast({
						title: e.data.msg,
						icon: 'none'
					})
					//TODO handle the exception
				}



			},
			// 拉黑 删除
			async operation(status) {
				let result = await this.$request({
					loading: 0,
					method: 'post',
					url: '/api/chat/delChatLog',
					data: {
						id: this.atUserId,
						status
					}
				})
				this.content.splice(this.current, 1)
				uni.$emit('jianshacount', this.unread);
				this.mackClick()
			},
			// 进入聊天页面
			jinru(item, index) {
				console.log(item)
				uni.$emit('jianshacount', item.unread)
				this.content[index].unread = 0
				this.navigateToFn({
					url: '/minePages/chat/talk?toid=' + item.toid + '&toname=' + item.username,
					checkLogin: true
				})
			},



			// 获取权限
			setPermissions() {
				// #ifdef APP-PLUS
				if (plus.os.name == 'Android') { // 判断是Android
					var main = plus.android.runtimeMainActivity();
					var pkName = main.getPackageName();
					var uid = main.getApplicationInfo().plusGetAttribute("uid");
					var NotificationManagerCompat = plus.android.importClass(
						"android.support.v4.app.NotificationManagerCompat");
					//android.support.v4升级为androidx
					if (NotificationManagerCompat == null) {
						NotificationManagerCompat = plus.android.importClass(
							"androidx.core.app.NotificationManagerCompat");
					}
					var areNotificationsEnabled = NotificationManagerCompat.from(main).areNotificationsEnabled();
					// 未开通‘允许通知’权限，则弹窗提醒开通，并点击确认后，跳转到系统设置页面进行设置
					if (!areNotificationsEnabled) {
						uni.showModal({
							title: '通知权限开启提醒',
							content: '您还没有开启通知权限，无法接受到消息通知，请前往设置！',
							confirmText: '去设置',
							success: function(res) {
								if (res.confirm) {
									var Intent = plus.android.importClass('android.content.Intent');
									var Build = plus.android.importClass("android.os.Build");
									//android 8.0引导
									if (Build.VERSION.SDK_INT >= 26) {
										var intent = new Intent('android.settings.APP_NOTIFICATION_SETTINGS');
										intent.putExtra('android.provider.extra.APP_PACKAGE', pkName);
									} else if (Build.VERSION.SDK_INT >= 21) { //android 5.0-7.0
										var intent = new Intent('android.settings.APP_NOTIFICATION_SETTINGS');
										intent.putExtra("app_package", pkName);
										intent.putExtra("app_uid", uid);
									} else { //(<21)其他--跳转到该应用管理的详情页
										intent.setAction(Settings.ACTION_APPLICATION_DETAILS_SETTINGS);
										var uri = Uri.fromParts("package", mainActivity.getPackageName(),
											null);
										intent.setData(uri);
									}
									// 跳转到该应用的系统通知设置页
									main.startActivity(intent);
								}
							}
						});
					}
				} else if (plus.os.name == 'iOS') { // 判断是ISO
					var isOn = undefined;
					var types = 0;
					var app = plus.ios.invoke('UIApplication', 'sharedApplication');
					var settings = plus.ios.invoke(app, 'currentUserNotificationSettings');
					if (settings) {
						types = settings.plusGetAttribute('types');
						plus.ios.deleteObject(settings);
					} else {
						types = plus.ios.invoke(app, 'enabledRemoteNotificationTypes');
					}
					plus.ios.deleteObject(app);
					isOn = (0 != types);
					if (isOn == false) {
						uni.showModal({
							title: '通知权限开启提醒',
							content: '您还没有开启通知权限，无法接受到消息通知，请前往设置！',
							showCancel: false,
							confirmText: '去设置',
							success: function(res) {
								if (res.confirm) {
									var app = plus.ios.invoke('UIApplication', 'sharedApplication');
									var setting = plus.ios.invoke('NSURL', 'URLWithString:', 'app-settings:');
									plus.ios.invoke(app, 'openURL:', setting);
									plus.ios.deleteObject(setting);
									plus.ios.deleteObject(app);
								}
							}
						});
					}
				}
				// #endif

			},

			// 获取窗口尺寸
			getWindowSize() {
				uni.getSystemInfo({
					success: (res) => {
						this.windowHeight = res.windowHeight
						this.windowWidth = res.windowWidth
					}
				})
			},
			listPress(e) {
				// #ifdef APP-PLUS
				uni.vibrateShort()
				// #endif
				this.current = e.currentTarget.id
				let pageX = e.touches[0].pageX
				let pageY = e.touches[0].pageY
				if (pageX > (this.windowWidth / 2)) {
					this.kuaiStyle = `right:${this.windowWidth - pageX}px;`
				} else {
					this.kuaiStyle = `left:${pageX}px;`
				}
				if (pageY > (this.windowHeight / 2)) {
					this.kuaiStyle += `bottom:${this.windowHeight - pageY}px;`
				} else {
					this.kuaiStyle += `top:${pageY}px;`
				}

				this.kuaiShow = true
				this.atUserId = this.content[this.current].id;
				this.unread = this.content[this.current].unread;
				this.animation.opacity(1).scale(1).step()
				this.animationData = this.animation.export()
			},
			mackClick() {
				this.colseKuai()

			},
			colseKuai() {
				if (!this.kuaiShow) return
				this.animation.scale(0.1).opacity(0).step({
					duration: 200
				})
				this.animationData = this.animation.export()
				this.current = -1
				this.atUserId = ''
				setTimeout(() => {
					this.kuaiShow = false
				}, 300)
			},
			qiehuan(type, title) {
				if (type == 0) {
					uni.navigateTo({
						url: "/minePages/msg-son-page/comment"
					})
				}
				if (type == 1) {
					uni.navigateTo({
						url: "/minePages/msg-son-page/upvote"
					})
				}
				if (type == 2) {
					uni.navigateTo({
						url: "/minePages/msg-son-page/sys-not"
					})
				}
				if (type == 3) {
					uni.navigateTo({
						url: "/minePages/msg-son-page/attention"
					})
				}
				// this.navigateToFn({
				// 	url: '/minePages/my_msg?type=' + type + '&title=' + title,
				// 	checkLogin: true
				// })
			},
		}
	}
</script>
<style lang="scss">
	/* #ifdef APP-PLUS */
	.status_bar {
		height: var(--status-bar-height);
		width: 100%;
		//background-color: #111224;
	}

	/* #endif */
</style>
<style lang="scss" scoped>
	.content {
    // #ifdef APP
    height:100vh;
    // #endif
    // #ifndef APP
    height: calc(100vh - 95px);
    // #endif
    .top-title{
      font-size: 16px;
      text-align: center;
      height: 44px;
      line-height: 44px;
    }
    background: url(/static/top-bg.png) no-repeat;
    background-size: 100% 250px;
		.sticky1 {
			position: sticky;
			top: 0;
			//background-color: #111224;
			z-index: 10;

			.navTab {
				height: 88rpx;
				width: fit-content;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: flex-end;
				padding-left: 30rpx;

				text {
					font-size: 36rpx;
					font-weight: bold;
					color: #FFFFFF;
					margin-bottom: 23rpx;
				}

				.xian {
					width: 26rpx;
					height: 8rpx;
          background: linear-gradient(90deg, #080808 0%, #080808 100%);
					border-radius: 60rpx;
					justify-self: flex-end;
				}
			}
		}

		.tabs {
			// height: 229rpx;
			//margin-top: 40rpx;
			//margin-bottom: 24rpx;
      padding: 15px 0;
      //background: #fff;
      border-bottom: 1px solid #ebebeb;
			.tabs-item {
				text-align: center;

				image {
					width: 92rpx;
					height: 92rpx;
				}

				.t1 {
					font-size: 24rpx;
					font-weight: 400;
					color: #333333;
					margin-top: 22rpx;
				}
			}
		}

		.conversation {
			.click-color {
				background-color: rgba(255, 255, 255, 0.1);
			}

			.click-color1 {
				background-color: #e0e0e1;
			}
			.c-item {
        //border-bottom: 1px solid #ebebeb;
				height: 143rpx;
				padding: 0 30rpx;
				position: relative;
        //background: #ffffff;
				.left-img {
					width: 95rpx;
					height: 95rpx;
					position: relative;

					image {
						border-radius: 50%;
						width: 100%;
						height: 100%;
					}

					.tag {
						width: 35rpx;
						height: 35rpx;
						position: absolute;
						top: -10rpx;
						right: -10rpx;
						background-color: red;
						font-size: 22rpx;
						color: #fff;
						border-radius: 50%;
						text-align: center;
						line-height: 35rpx;
					}
				}

				.right {
					flex: 1;
					padding-left: 24rpx;

					.name {
						font-size: 28rpx;
						font-weight: 400;
						color: #333333;
					}

					.time {
						font-size: 22rpx;
						font-weight: 400;
						color: #999999;
					}

					.neirong {
						font-size: 24rpx;
						font-weight: 400;
						color: #999999;
						margin-top: 6rpx;
						width: 400rpx;
					}
				}
			}

			.kuai {
				width: 200rpx;
				background-color: #FFFFFF;
				position: absolute;
				z-index: 100;
				// box-shadow: 0 0 5px #834BF4;
				transform: scale(0.5);

				.kuai-text {
					height: 100rpx;
					line-height: 100rpx;
					padding-left: 25rpx;
				}
			}
		}

		.mack {
			position: fixed;
			top: 0;
			bottom: 0;
			right: 0;
			left: 0;
			background-color: transparent;
		}
	}
</style>
